<template>
  <i-col :class-name="'grid-col ' + layoutItem.component.compConfigData.className"
         :span="layoutItem.component.compConfigData.span"
         :offset="layoutItem.component.compConfigData.offset"
         :push="layoutItem.component.compConfigData.push"
         :pull="layoutItem.component.compConfigData.pull"
         :style="{
           backgroundColor: layoutItem.component.compConfigData.styleConfig.backgroundColor,
           padding: layoutItem.component.compConfigData.styleConfig.padding + 'px',
           borderLeftWidth: layoutItem.component.compConfigData.styleConfig.border.leftBorderWidth + 'px',
           borderLeftStyle: layoutItem.component.compConfigData.styleConfig.border.leftBorderStyle,
           borderLeftColor: layoutItem.component.compConfigData.styleConfig.border.leftBorderColor,
           borderTopWidth: layoutItem.component.compConfigData.styleConfig.border.topBorderWidth + 'px',
           borderTopStyle: layoutItem.component.compConfigData.styleConfig.border.topBorderStyle,
           borderTopColor: layoutItem.component.compConfigData.styleConfig.border.topBorderColor,
           borderRightWidth: layoutItem.component.compConfigData.styleConfig.border.rightBorderWidth + 'px',
           borderRightStyle: layoutItem.component.compConfigData.styleConfig.border.rightBorderStyle,
           borderRightColor: layoutItem.component.compConfigData.styleConfig.border.rightBorderColor,
           borderBottomWidth: layoutItem.component.compConfigData.styleConfig.border.bottomBorderWidth + 'px',
           borderBottomStyle: layoutItem.component.compConfigData.styleConfig.border.bottomBorderStyle,
           borderBottomColor: layoutItem.component.compConfigData.styleConfig.border.bottomBorderColor,
         }"
         >
    <template v-if="!!layoutItem.children && (layoutItem.children.length > 0)">
      <template v-for="(subLayoutItem, subIndex) in layoutItem.children">
        <template v-if="subLayoutItem.component.container">
          <component :key="subIndex" :is="subLayoutItem.component.name" :layoutItem="subLayoutItem" :formData="formData"></component>
        </template>
        <template v-else>
          <component :key="subIndex" :is="subLayoutItem.component.name" :layoutItem="subLayoutItem" :formData="formData"></component>
        </template>
      </template>
    </template>
    <template v-else>
      <i-col>
        <div class="null-col">---</div>
      </i-col>
    </template>
  </i-col>
</template>

<script>

export default {
  name: "GridColWidget",
  props: {
    layoutItem: {
      type: Object,
      required: true
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {

  },
  methods: {

  },
  computed: {

  },
  watch: {}
}
</script>

<style lang="less" scoped>
  .grid-col {
    position: relative;

    .null-col {
      opacity: 0;
    }
  }
</style>
